<html>
<head>
<title>day12-作业-路由参数传递和共享元素转场动画.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #e2da90;}
.s4 { color: #bbb529;}
.s5 { color: #db7e9b;}
.s6 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day12-作业-路由参数传递和共享元素转场动画.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">router </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span>

<span class="s0">interface Project </span><span class="s1">{</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">number</span>
  <span class="s0">img</span><span class="s3">: </span><span class="s0">Resource</span>
  <span class="s0">title</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">text</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">hint</span><span class="s3">: </span><span class="s0">string</span>
<span class="s1">}</span>

<span class="s4">@</span><span class="s0">Entry</span>
<span class="s4">@</span><span class="s0">Component</span>
<span class="s0">struct Index </span><span class="s1">{</span>
  <span class="s4">@</span><span class="s0">State project</span><span class="s3">: </span><span class="s0">Project</span><span class="s5">[] </span><span class="s3">= </span><span class="s5">[</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">1</span><span class="s3">,</span>
      <span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s2">'app.media.project02'</span><span class="s5">)</span><span class="s3">,</span>
      <span class="s0">title</span><span class="s3">: </span><span class="s2">'后台管理系统'</span><span class="s3">,</span>
      <span class="s0">text</span><span class="s3">: </span><span class="s2">'以Vue技理后台后台管理系统面试题面试整理'</span><span class="s3">,</span>
      <span class="s0">hint</span><span class="s3">: </span><span class="s2">'后台系统'</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">2</span><span class="s3">,</span>
      <span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s2">'app.media.project01'</span><span class="s5">)</span><span class="s3">,</span>
      <span class="s0">title</span><span class="s3">: </span><span class="s2">'在线问医生平台 (医疗类)'</span><span class="s3">,</span>
      <span class="s0">text</span><span class="s3">: </span><span class="s2">'通过vue3+ts实现的在线医疗问诊相关技术整理'</span><span class="s3">,</span>
      <span class="s0">hint</span><span class="s3">: </span><span class="s2">'h5项目'</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">3</span><span class="s3">,</span>
      <span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s2">'app.media.project03'</span><span class="s5">)</span><span class="s3">,</span>
      <span class="s0">title</span><span class="s3">: </span><span class="s2">'鸿蒙知识点'</span><span class="s3">,</span>
      <span class="s0">text</span><span class="s3">: </span><span class="s2">'以ArkTS与ArkUI为主的鸿蒙基础知识点讲解'</span><span class="s3">,</span>
      <span class="s0">hint</span><span class="s3">: </span><span class="s2">'鸿蒙应用'</span>
    <span class="s1">}</span><span class="s3">,</span>
  <span class="s5">]</span>

  <span class="s0">build</span><span class="s5">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s5">() </span><span class="s1">{</span>
      <span class="s0">Text</span><span class="s5">(</span><span class="s2">'项目'</span><span class="s5">)</span>
      <span class="s0">Divider</span><span class="s5">()</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s6">20</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">20 </span><span class="s1">}</span><span class="s5">)</span>
      <span class="s0">ForEach</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">project</span><span class="s3">, </span><span class="s5">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">Project</span><span class="s3">, </span><span class="s0">index</span><span class="s3">: </span><span class="s0">number</span><span class="s5">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
        <span class="s0">Row</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s5">) </span><span class="s1">{</span>
          <span class="s0">Image</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">img</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s6">80</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">sharedTransition</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">id</span><span class="s3">.</span><span class="s0">toString</span><span class="s5">()</span><span class="s3">, </span><span class="s1">{ </span><span class="s0">duration</span><span class="s3">: </span><span class="s6">300 </span><span class="s1">}</span><span class="s5">)</span>
          <span class="s0">Column</span><span class="s5">() </span><span class="s1">{</span>
            <span class="s0">Column</span><span class="s5">() </span><span class="s1">{</span>
              <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">title</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">18</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s6">600</span><span class="s5">)</span>
              <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">text</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s2">'#999'</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">12</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">lineHeight</span><span class="s5">(</span><span class="s6">20</span><span class="s5">)</span>
            <span class="s1">}</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s2">'100%'</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">alignItems</span><span class="s5">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>

            <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">hint</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">12</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s2">'#ff29433c'</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s5">(</span><span class="s2">'#EFF0F1'</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s6">5</span><span class="s5">)</span>
          <span class="s1">}</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s2">'100%'</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">alignItems</span><span class="s5">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">justifyContent</span><span class="s5">(</span><span class="s0">FlexAlign</span><span class="s3">.</span><span class="s0">SpaceBetween</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s6">100</span><span class="s5">)</span>
        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s2">'100%'</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s6">10</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">onClick</span><span class="s5">(() </span><span class="s3">=&gt; </span><span class="s1">{</span>
          <span class="s0">router</span><span class="s3">.</span><span class="s0">pushUrl</span><span class="s5">(</span>
            <span class="s1">{</span>
              <span class="s0">url</span><span class="s3">: </span><span class="s2">'/pages/IndexPage'</span><span class="s3">.</span><span class="s0">slice</span><span class="s5">(</span><span class="s6">1</span><span class="s5">)</span><span class="s3">,</span>
              <span class="s0">params</span><span class="s3">: </span><span class="s0">item</span>
            <span class="s1">}</span><span class="s5">)</span>
        <span class="s1">}</span><span class="s5">)</span>

        <span class="s0">Divider</span><span class="s5">()</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s6">20</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">20 </span><span class="s1">}</span><span class="s5">)</span>
      <span class="s1">}</span><span class="s5">)</span>
    <span class="s1">}</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>